<template>
  <div class="SummaryInfo" :style="{height: isOpen ? 'auto' : '30px'}">
    <p class="custName flex_c_line">
      {{ projectData.custName }}
      <span class="code"
        ><span class="label">统一社会信用代码：</span
        >{{ projectData.creditNo }}</span
      >
    </p>
    <DetailForm :dataSources="projectData" :columns="profileColumns" >
      <template #isBranch="{ formItem }">
        {{ formItem.isBranch == 0 ? '独立主体' : '分支机构' }}
      </template>
      <template #clientAliasName="{ formItem }">
        <el-button type="primary" link plain @click="showClientAlias(formItem)" > 查看 </el-button>
      </template>
    </DetailForm>
    <p class="title_2">非车业务：重客</p>
    <DetailForm :dataSources="feicheData" :columns="feiche" />
    <p class="title_2">团车业务</p>
    <DetailForm :dataSources="tuancheData" :columns="tuanche" />
    <!-- 展开收起 -->
    <DArrowRight style="width: 1.5em; height: 1.5em; margin-right: 8px; color: #3A71A8;" @click="switchBOx" class="isOpen" :style="{transform: isOpen ? 'rotate(90deg)' : 'rotate(-90deg)'}"/>
    <el-dialog v-model="clientAliasNameVisible" title="客户别名" width="60%" append-to-body>
        <el-form class="custom-form" :inline="true" :model="clientAliasNameForm" label-width="120px">
          <el-form-item label="系统模块" prop="custName">
            <el-input disabled v-model="clientAliasNameForm.custName" style="width: 200px;"/>
          </el-form-item>
          <el-form-item label="系统模块" prop="certType">
            <el-input disabled v-model="clientAliasNameForm.certType" style="width: 200px;"/>
          </el-form-item>
          <el-form-item label="系统模块" prop="certNo">
            <el-input disabled v-model="clientAliasNameForm.certNo" style="width: 200px;"/>
          </el-form-item>
        </el-form>
        <el-table :data="tableList" >
          <el-table-column label="别名名称" prop="clientAliasName" min-width="100" show-overflow-tooltip align="center"/>
          <el-table-column label="VIP编码" prop="vipCode" min-width="100" show-overflow-tooltip align="center"/>
          <el-table-column label="创建时间" prop="createTime" min-width="100" show-overflow-tooltip align="center"/>
          <el-table-column label="创建人" prop="createName" min-width="100" show-overflow-tooltip align="center"/>
          <el-table-column label="生效时间" prop="startTime" min-width="100" show-overflow-tooltip align="center"/>
        </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="SummaryInfo">
import { reactive } from "vue";

const props = defineProps({
  custInfo: {
    type: Object,
    default: {},
  },
});

const showClientAlias = (row) => {
  console.log(row);
  clientAliasNameVisible.value = true
};

// 关闭收起
const isOpen = ref(false)
function switchBOx(){
    isOpen.value = !isOpen.value
}

const projectData = reactive({
  custId: "6ED3E1071D380EA58C201118",
  custName: "苏州市轨道交通集团有限公司",
  certType: "1",
  certNo: "91320500596945370W",
  certName: "统一社会信用代码",
  creditNo: "91320500596945370W",
  orgNo: "596945370",
  otherNo: "352423123124",
  regNo: "320500000080659",
  address: "苏州市干将西路668号",
  econKind: "1100",
  econKindName: "有限责任公司",
  provinceCode: "320000",
  districtCode: "320500",
  areaCode: "",
  provinceName: "江苏省",
  districtName: "苏州市",
  areaName: null,
  operName: "周明保",
  industryOne: "L0000",
  industryTwo: "L7200",
  industryThree: "L7290",
  industryFour: "L7291",
  industryOneName: "租赁和商务服务业",
  industryTwoName: "商务服务业",
  industryThreeName: "其他商务服务业",
  industryFourName: "旅行社及相关服务",
  clientAliasName:
    "苏州市轨道交通集团有限公司（平陆）运河跨线桥梁工程施工.QL4标段项目经理部,11111111ssss,test.(),123332,121212",
  provinces: "江苏省/苏州市/",
  clientId: 3776,
  isStar: null,
  tkBusAscName: "团车",
  qkBusAscName: "重客",
  dataUpdTm: "2022-08-16 17:04:09",
  startDate: "2012-05-30",
  parentCuGrpListInfoSVO: null,
  custClassTypeIndName: "石油化工客户",
  topOrgCode: null,
  oneOrgCode: null,
  topOrgName: "苏州市人民政府国有资产监督管理委员会",
  oneOrgName: "苏州市人民政府国有资产监督管理委员会",
  isBranch: "0",
  custClassTypeGm: "其他",
  vipcode: "VIP20000000000000045",
});
const profileColumns = ref([
  { label: "统一社会信用代码", column: "creditNo", span: 8 },
  { label: "组织机构代码", column: "orgNo", span: 8 },
  { label: "工商注册号", column: "regNo", span: 8 },
  { label: "其他证件类型", column: "otherNo", span: 8 },
  { label: "注册地址", column: "address", span: 8 },
  { label: "客户统一代码", column: "custId", span: 8 },
  { label: "客户类型", column: "isBranch", slot: "isBranch", span: 8 },
  { label: "企业类型", column: "econKindName", span: 8 },
  { label: "所属行业一级", column: "industryOneName", span: 8 },
  { label: "所属行业二级", column: "industryTwoName", span: 8 },
  { label: "所属行业三级", column: "industryThreeName", span: 8 },
  { label: "所属行业四级", column: "industryFourName", span: 8 },
  { label: "所在省/市/区县", column: "provinces", span: 8 },
  { label: "法定代表人姓名", column: "operName", span: 8 },
  { label: "股权一级机构", column: "oneOrgName", span: 8 },
  { label: "股权上级机构", column: "topOrgName", span: 8 },
  { label: "客户别名", column: "clientAliasName", slot: "clientAliasName", span: 16 },
]);
const feicheData = reactive({
  custId: "6ED3E1071D380EA58C201118",
  departmentCode: "3",
  departmentName: "石油化工客户处",
  vipCode: "VIP20000000000000045",
  appBranch: "",
  appBranchId: null,
  appBranchName: null,
  bePotFlag: "1",
  bePotName: "存量客户",
  qxbFlag: "1",
  qxbFlagName: "是",
  custClassType: "2",
  custClassName: "其他",
  custLevel: "1",
  custLevelName: "重客一级",
  topOrgCode: "7D89K55262E8B9F1A6200710",
  topOrgName: null,
  oneOrgCode: "7D89K55262E8B9F1A6200710",
  oneOrgName: null,
  dataUpdTm: "2022-08-16 17:04:52",
  qkStairName: "苏州市轨道交通集团有限公司",
  qkTopName: "",
});
const feiche = ref([
  { label: "总部管理处室", column: "departmentName", span: 8 },
  { label: "VIP编码", column: "vipCode", span: 8 },
  { label: "客户类别(行业)", column: "custClassTypeIndName", span: 8 },
  { label: "存潜标识", column: "bePotName", span: 8 },
  { label: "启信宝认证", column: "qxbFlagName", span: 8 },
  { label: "客户类别", column: "custClassName", span: 8 },
  { label: "业务归属层级", column: "custLevelName", span: 8 },
  { label: "上级机构名称", column: "qkTopName", span: 8 },
]);
const tuancheData = reactive({
  custId: "6ED3E1071D380EA58C201118",
  custType: "2",
  custTypeName: "分对总客户",
  leadRogCode: "",
  leadRogName: null,
  blanketCustomerCode: "3123123123",
  manageBranch: "",
  brBornOrgCode: "苏州分公司",
  carUsageSy: "企业客车、非营业货车、特种车",
  idsVehicleTypeSy:
    "6座以下客车、10吨及10吨以上货车、36座及36座以上客车、5吨及10吨以下货车、特种车三、20座及36座以下客车、6座及10座以下客车、2吨以下货车、10座及20座以下客车、10吨及10吨以上挂车、特种车二",
  carUsageJq: "企业客车、特种车、非营业货车",
  idsVehicleTypeJq:
    "20座及36座以下客车、6座及10座以下客车、6座以下客车、36座及36座以上客车、特种车二、10吨及10吨以上货车、5吨及10吨以下货车、2吨以下货车、10座及20座以下客车、特种车三",
  dataUpdTm: "2021-02-24 15:29:13",
  bePotFlag: null,
  tkAppBranchCode: "",
  tkAppBranchName: null,
});
const tuanche = ref([
  { label: "客户管理类型", column: "custTypeName", span: 8 },
  { label: "牵头机构", column: "leadRogName", span: 8 },
  { label: "统保代码", column: "blanketCustomerCode", span: 8 },
  { label: "经营地区", column: "manageBranch", span: 8 },
  { label: "落地机构", column: "brBornOrgCode", span: 16 },
  { label: "车辆使用性质(商业险)", column: "carUsageSy", span: 24 },
  { label: "车辆种类(商业险)", column: "idsVehicleTypeSy", span: 24 },
  { label: "车辆使用性质(交强险)", column: "carUsageJq", span: 24 },
  { label: "车辆种类(交强险)", column: "idsVehicleTypeJq", span: 24 },
]);

// 客户别名
const clientAliasNameVisible = ref(false)
const clientAliasNameForm = ref({
    custName: "苏州市轨道交通集团有限公司",
    certType: "统一社会信用代码",
    certNo: "91321452387632478",
})
const tableList = reactive([
    {
        clientAliasName: "苏州市轨道交通",
        vipCode: "V0A000000000001",
        createTime: "2024-05-30 17:11:23",
        createName: "王丽丽",
        startTime: "2024-05-30 17:11:23",
    },
    {
        clientAliasName: "苏州市轨道交通",
        vipCode: "V0A000000000001",
        createTime: "2024-05-30 17:11:23",
        createName: "王丽丽",
        startTime: "2024-05-30 17:11:23",
    },
    {
        clientAliasName: "苏州市轨道交通",
        vipCode: "V0A000000000001",
        createTime: "2024-05-30 17:11:23",
        createName: "王丽丽",
        startTime: "2024-05-30 17:11:23",
    },
])
</script>

<style lang="scss" scoped>
.SummaryInfo {
    overflow: hidden;
    position: relative;
    transition: all .5s;
    .isOpen{
        position: absolute;
        bottom: 0px;
        right: 0px;
    }
  .upTime {
    color: gray;
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .custName {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    align-items: flex-end;
    color: #3a71a8;
    margin-bottom: 20px;
    .code {
      color: gray;
      font-size: 14px;
      font-weight: 400;
      margin-left: 20px;
      .label {
        font-weight: 500;
      }
    }
  }
  .title_2 {
    padding: 0;
    margin: 10px 0 5px;
  }
}
</style>